<template>
	<div class="wrap" v-loading="loading" element-loading-text="等下,我正在请求" element-loading-spinner="el-icon-loading">
		<basic-opt :has_left="true">
			<template #search>
				<div class="opt-item">
					<el-select class="w-ipt" v-model="type" placeholder="请选择类型筛选数据" @change="changeType">
						<el-option v-for="(value, name) in type_list" :label="value" :value="name" :key="name">
						</el-option>
					</el-select>
				</div>
				<div class="opt-item">
					<el-select class="w-ipt" v-model="state" placeholder="请选择状态筛选数据" @change="changeState">
						<el-option v-for="(value, name) in state_list" :label="value" :value="name" :key="name">
						</el-option>
					</el-select>
				</div>
				<div class="opt-item">
					<el-button @click="getSearchData">搜索</el-button>
				</div>
				<div class="opt-item">
					<reset-search></reset-search>
				</div>
			</template>
		</basic-opt>

		<div class="table-box">
			<el-table :data="data" stripe :header-cell-style="header_cell_style" :max-height="table_max_height">
				<el-table-column prop="id" label="ID" width="200px"></el-table-column>
				<el-table-column prop="type" label="类型" width="400px">
					<template #default="scope">
						<span v-if="scope.row.type == 'SK010100'">实有人口住址信息服务接口</span>
						<span v-if="scope.row.type == 'SK010101'">人像信息服务接口</span>
						<span v-if="scope.row.type == 'SK010102'">门禁设备信息服务接口</span>
						<span v-if="scope.row.type == 'SK010103'">实有人口门禁轨迹信息接口</span>
						<span v-if="scope.row.type == 'SK010104'">门禁设备照片信息服务接口</span>
						<span v-if="scope.row.type == 'SK010105'">实有房屋信息服务接口</span>
						<span v-if="scope.row.type == 'SK010106'">实有房间信息服务接口</span>
					</template>
				</el-table-column>
				<el-table-column prop="content" label="详细内容" width="150">
					<template #default="scope">
						<el-popover placement="right" width="800" trigger="click">
							<textarea v-model="scope.row.content" cols="100" rows="40"
								style="width: 100%;font-size: 15px;line-height: 20px;"></textarea>
							<template #reference>
								<el-button type="info" plain size="mini" @click="viewContent(scope.row)">查看详情
								</el-button>
							</template>
						</el-popover>
					</template>
				</el-table-column>
				<el-table-column prop="remark" label="备注"></el-table-column>
				<el-table-column prop="state" label="状态" width="150">
					<template #default="scope">
						<span v-if="scope.row.state == 1">初始化</span>
						<span v-if="scope.row.state == 2">成功</span>
						<span v-if="scope.row.state == 3">失败</span>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="150">
					<template #default="scope">
						<el-button type="success" plain size="mini" @click="againPush(scope.row)">重新推送</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<page-component @pageChanged="onPageChanged"></page-component>
	</div>

  <!--  mobile  -->
  <div class="mobile-wrap" v-loading="loading" element-loading-text="等下,我正在请求" element-loading-spinner="el-icon-loading">
    <div class="mobile-search-vertical">
      <el-select class="w-ipt" v-model="type" placeholder="请选择类型筛选数据" @change="changeType">
        <el-option v-for="(value, name) in type_list" :label="value" :value="name" :key="name">
        </el-option>
      </el-select>
      <el-select class="w-ipt" v-model="state" placeholder="请选择状态筛选数据" @change="changeState">
        <el-option v-for="(value, name) in state_list" :label="value" :value="name" :key="name">
        </el-option>
      </el-select>
      <el-button @click="getSearchData" size="medium">搜索</el-button>
    </div>
    <div class="moblie-table-box">
      <el-table :data="data" stripe :header-cell-style="header_cell_style" :max-height="mobile_table_max_height">
        <el-table-column prop="id" label="ID" width="200px"></el-table-column>
        <el-table-column prop="type" label="类型" width="400px">
          <template #default="scope">
            <span v-if="scope.row.type == 'SK010100'">实有人口住址信息服务接口</span>
            <span v-if="scope.row.type == 'SK010101'">人像信息服务接口</span>
            <span v-if="scope.row.type == 'SK010102'">门禁设备信息服务接口</span>
            <span v-if="scope.row.type == 'SK010103'">实有人口门禁轨迹信息接口</span>
            <span v-if="scope.row.type == 'SK010104'">门禁设备照片信息服务接口</span>
            <span v-if="scope.row.type == 'SK010105'">实有房屋信息服务接口</span>
            <span v-if="scope.row.type == 'SK010106'">实有房间信息服务接口</span>
          </template>
        </el-table-column>
        <el-table-column prop="content" label="详细内容" width="150">
          <template #default="scope">
            <el-popover placement="right" width="800" trigger="click">
							<textarea v-model="scope.row.content" cols="100" rows="40"
                        style="width: 100%;font-size: 15px;line-height: 20px;"></textarea>
              <template #reference>
                <el-button type="info" plain size="mini" @click="viewContent(scope.row)">查看详情
                </el-button>
              </template>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注"></el-table-column>
        <el-table-column prop="state" label="状态" width="150">
          <template #default="scope">
            <span v-if="scope.row.state == 1">初始化</span>
            <span v-if="scope.row.state == 2">成功</span>
            <span v-if="scope.row.state == 3">失败</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <page-component @pageChanged="onPageChanged"></page-component>
  </div>
</template>

<script>
	import API from '@/api/index.js'
	import mixin from '@/mixin.js'

	export default {
		name: '',
		mixins: [mixin],
		data() {
			return {
				type_list: [],
				type: '',
				state_list: {
					1: '初始化',
					2: '成功',
					3: '失败'
				},
				state: ''
			}
		},
		mounted() {
			this.getData();
			this.getTransmitTypes();
		},
		methods: {
			async getData() {
				let self = this;
				self.loading = true;
				try {
					let params = {
						type: self.type,
						state: self.state
					}
					self.addPageInfo(params)
					let res = await API.transmits(params.pageNumber, params.pageSize, params.type, params.state)
					self.loading = false;
					self.onGotPageData(res)
				} catch (err) {
					self.loading = false;
				}
			},
			// 查看指定的报文内容
			viewContent(row) {
				let self = this;
				self.loading = true;
				API.oneTransmit(row.id).then(res => {
					let data = res.data.data;
					row.content = data.content;
					self.loading = false;
				}).catch(err => {
					self.loading = false;
					self.$message.error(err.response.data.message)
				})
			},
			againPush(row) {
				let self = this;
				self.loading = true;
				API.pushTransmit(row.id).then(res => {
					console.log(res);
					self.loading = false;
					self.$message.success("重新推送成功");
				}).catch(err => {
					self.loading = false;
					self.$message.error(err.response.data.message)
				})
			},
			// 获取公安接口类型
			getTransmitTypes() {
				let self = this;
				API.transmitType().then(res => {
					let data = res.data.data;
					self.type_list = data;
				}).catch(err => {
					self.$message.error(err.response.data.message)
				})
			},
			changeType(val) {
				let self = this;
				self.type = val;
				self.getSearchData();
			},
			changeState(val) {
				let self = this;
				self.state = val;
				self.getSearchData();
			}
		}
	}
</script>

<style scoped lang="scss">

</style>
